<template>
  <div class="main-info" style="position: relative">
    <div class="pubilc-chart-title">房地产{{ tabList?.length === 2 ? '供需' : '销售' }}情况</div>
    <time-filtrate-public :cityAndAreaList="cityAndAreaList" style="position: absolute; right: 0; top: 0" @changeFiltrateTime="(item) => emit('changeFiltrateTime', item)"></time-filtrate-public>
    <el-row v-for="(item, index) of infoList" :style="{ marginTop: index === 1 ? '8px' : '' }">
      <el-col :span="12" v-for="colItem of item">
        <span>{{ colItem.label }}：</span>
        <span>{{ colItem.value }}{{ colItem.unit }}&nbsp;</span>
        <template v-if="colItem.yoyPercentage || colItem.yoyPercentage === 0">
          <span>同比</span>
          <template v-if="colItem.yoyPercentage !== 0">
            <el-icon v-if="colItem.yoyPercentage > 0" color="#4DAC56">
              <Top/>
            </el-icon>
            <el-icon v-else color="#EF8169">
              <Bottom/>
            </el-icon>
            <span
                :style="{ color: colItem.yoyPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                Math.abs(colItem.yoyPercentage)
              }}%</span>
          </template>
          <template v-else>--</template>
        </template>
        <template v-if="colItem.qoqPercentage || colItem.qoqPercentage === 0">
          <span> 环比</span>
          <template v-if="colItem.qoqPercentage !== 0">
            <el-icon v-if="colItem.qoqPercentage > 0" color="#4DAC56">
              <Top/>
            </el-icon>
            <el-icon v-else color="#EF8169">
              <Bottom/>
            </el-icon>
            <span
                :style="{ color: colItem.qoqPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                Math.abs(colItem.qoqPercentage)
              }}%</span>
          </template>
          <template v-else>--</template>
        </template>
      </el-col>
    </el-row>
    <div style="position: relative">
      <div class="pubilc-chart-title" style="margin-top: 17px;">房地产{{ tabList?.length === 2 ? '供需' : '销售' }}走势</div>
      <el-tabs v-model="currentTab"
               @tab-change="changeTab">
        <el-tab-pane v-for="(item, index) of tabList" :key="item.id"
                     :label="item.label"
                     :name="item.label"></el-tab-pane>
      </el-tabs>
      <div class="line-select">
        <el-select class="line-select-item" v-model="currentHouseType" size="small"
                   @change="changeHouseType">
          <el-option
              v-for="item in houseTypeList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
              class="custom-select-option"
          />
        </el-select>
        <el-select class="line-select-item" v-model="currentAcreage" size="small"
                   @change="changeAcreage">
          <el-option
              v-for="item in acreageList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
              class="custom-select-option"
          />
        </el-select>
      </div>
    </div>
  </div>
  <div style="position: relative; flex: 1">
    <line-house-property-condition-chart
        ref="echartComponentDom"
        :lineData="props?.lineData"
        :tabList="props?.tabList"
        :yAxisName="yAxisName"
        v-bind="$attrs"
        :dialogData="dialogData"
        @changeXAxisTimeType="changeXAxisTimeType($event)"
        @click="emit('magnifyChart')"
    ></line-house-property-condition-chart>
  </div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose, defineEmits, watch} from 'vue'
import {pxToRem} from "@/utils/index";
import timeFiltratePublic from "../timeFiltratePublic.vue";
import lineHousePropertyConditionChart from "./lineHousePropertyConditionChart.vue";

const props = defineProps({
  lineData: {
    type: Object,
    default: () => ({})
  },
  infoList: {
    type: Array,
    default: () => ([])
  },
  tabList: {
    type: Array,
    default: () => ([])
  },
  cityAndAreaList: {
    type: Array,
    default: () => ([])
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

const emit = defineEmits(['changeTab', 'changeHouseType', 'changeAcreage', 'changeFiltrateTime', 'changeXAxisTimeType', 'magnifyChart'])

const echartComponentDom = ref(null);
const yearPickerModel = ref('') // 选择年份vmodel

const currentTab = ref('') // 当前tab
const yAxisName = ref('套数') // y轴name
watch(
    () => currentTab.value,
    (newVal) => {
      yAxisName.value = props?.tabList?.find(x => x.label === newVal)?.unit
    }
)

const currentHouseType = ref('全部户型') // 当前户型
const currentAcreage = ref('全部面积') // 当前面积
const houseTypeList = ref([
  {
    id: 0,
    value: '全部户型'
  },
  {
    id: 1,
    value: '一居室'
  },
  {
    id: 2,
    value: '二居室'
  },
  {
    id: 3,
    value: '三居室'
  },
  {
    id: 4,
    value: '四居室'
  },
  {
    id: 5,
    value: '五居室'
  },
]) // 户型列表
const acreageList = ref([
  {
    id: 0,
    value: '全部面积'
  },
  {
    id: 1,
    value: '90m²以下面积'
  },
  {
    id: 2,
    value: '90-144m²面积'
  },
  {
    id: 3,
    value: '144m²以上面积'
  },
]) // 面积列表

const changeTab = (item) => {
  emit('changeTab', item)
}

const changeHouseType = (item) => {
  console.log(item);
  emit('changeHouseType', item)
}

const changeAcreage = (item) => {
  console.log(item);
  emit('changeAcreage', item)
}

const changeXAxisTimeType = (val) => {
  emit('changeXAxisTimeType', val)
}

defineExpose({
  echartComponentDom
})

onMounted(() => {
  currentTab.value = props?.tabList[0]?.label
})
</script>

<style scoped lang="less">
.pubilc-chart-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 17px;
}

.main-info {
  .el-row {
    .el-col {
      display: flex;
      align-items: center;
      font-size: 12px;

      > span:first-child {
        font-weight: bold;
      }
    }
  }

  :deep(.el-tabs) {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav-wrap:after {
      height: 0;
    }

    .el-tabs__active-bar {
      height: 0;
    }

    .el-tabs__item {
      text-align: center;
      padding: 0 5px;
      font-size: 12px;
      height: 20px;
      box-shadow: inset 0px 0px 8px 0px #3D7FFF;
      border-radius: 8px;
      cursor: pointer;
      color: white;
    }

    .el-tabs__item:not(:last-child) {
      margin-right: 5px;
    }

    .el-tabs__item.is-active {
      background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
    }
  }
  .line-select {
    position: absolute;
    right: 0;
    top: 30px;
    display: flex;
    .line-select-item {
      z-index: 1;
      width: 90px;

      :deep(.el-select__wrapper) {
        background: #001A35;
        box-shadow: inset 0px 0px 8px 0px #3D7FFF;
        border-radius: 8px;
        border: 1px solid #0839A7;

        .el-select__selected-item {
          color: white;
        }
      }
    }

    .line-select-item:nth-of-type(1) {
      margin-right: 16px;
    }
  }
}

/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
</style>